<!-- home -->
<template>
  <div class="index-container">
    <van-swipe class="my-swipe" :autoplay="3000">
      <van-swipe-item v-for="item in swiperList" :key="item.id" @click="goLink(item)">
        <img :src="item.image" />
        <span v-if="item.fontText" :style="{ color: item.fontColor }" class="swiper-text">{{ item.fontText }}</span>
      </van-swipe-item>
    </van-swipe>
    <div class="card">
      <van-grid :column-num="3" :border="false">
        <van-grid-item
          v-for="item in functionList"
          @click="goLink(item)"
          clickable
          :key="item.id"
          :icon="item.image"
          :text="item.text"
        />
      </van-grid>
    </div>
    <van-swipe class="my-swipe my-swipe2" :autoplay="3000">
      <van-swipe-item v-for="item in advList" :key="item.id" @click="goLink(item)">
        <img :src="item.image" />
        <span v-if="item.fontText" :style="{ color: item.fontColor }" class="swiper-text">{{ item.fontText }}</span>
      </van-swipe-item>
    </van-swipe>
    <div class="yy-list">
      <div class="yy-item" :style="{ zIndex: 100 - index }" v-for="(item, index) in appyList" :key="item.id">
        <template v-if="index % 2 == 0">
          <div class="yy-item-l">
            <p class="yy-item-title">{{ item.text }}</p>
            <p class="yy-item-subTitle">{{ item.subText }}</p>
          </div>
          <div class="yy-item-r">
            <img :src="item.image" class="yy-item-image" alt="" />
            <div class="yy-item-button">
              <span @click="goLink(item)">预约报名 ></span>
            </div>
          </div>
        </template>
        <template v-if="index % 2 == 1">
          <div class="yy-item-r">
            <img :src="item.image" class="yy-item-image" alt="" />
            <div class="yy-item-button">
              <span @click="goLink(item)">预约报名 ></span>
            </div>
          </div>
          <div class="yy-item-l">
            <p class="yy-item-title">{{ item.text }}</p>
            <p class="yy-item-subTitle">{{ item.subText }}</p>
          </div>
        </template>
      </div>
    </div>
    <home-report></home-report>
    <!-- <div class="module-list">
      <div class="module-box" v-for="item in modulesList" :key="item.text" @click="goLink(item)">
        <div class="icon"><i class="iconfont myicon" :class="item.icon"></i></div>
        <div class="tx">
          <p class="title">{{ item.text }}</p>
          <p class="text">{{ item.subText }}</p>
        </div>
        <div class="right"><i class="iconfont icon-tiaozhuan"></i></div>
      </div>
    </div> -->

    <!-- <div class="warpper">
      <h1 class="demo-home__title">
        <img src="https://www.sunniejs.cn/static/weapp/logo.png" /><span> VUE H5开发模板</span>
      </h1>
      <h2 class="demo-home__desc">A vue h5 template with Vant UI</h2>
    </div>
    <van-cell icon="success" v-for="item in list" :key="item" :title="item" /> -->
  </div>
</template>

<script>
import { Toast } from 'vant'
import homeReport from './compenents/homeReport'
import { getModulesList } from '@/api/home.js'
export default {
  components: {
    homeReport
  },
  name: 'Home',
  data() {
    return {
      // 活动页列表
      swiperList: [
        // {
        //   id: 1,
        //   image: 'https://img2.baidu.com/it/u=2087174078,2820408251&fm=26&fmt=auto',
        //   url: 'https://mp.weixin.qq.com/s/6fBfMoc2GRdY1D7UEKnTKg'
        // },
        // {
        //   id: 2,
        //   image: 'https://img2.baidu.com/it/u=2087174078,2820408251&fm=26&fmt=auto',
        //   url: 'https://mp.weixin.qq.com/s/6fBfMoc2GRdY1D7UEKnTKg'
        // }
      ],
      // 菜单列表
      functionList: [],
      // 广告列表
      advList: [],
      // 新闻列表
      appyList: [],
      // 功能模块列表2
      modulesList2: [
        {
          text: '平台简介',
          to: '/news/ckf_notice_news',
          subText: 'Park Profile',
          icon: 'https://img1.baidu.com/it/u=1855937990,2189730199&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
          url: 'https://mp.weixin.qq.com/s/6fBfMoc2GRdY1D7UEKnTKg',
          status: true
        },
        {
          text: '台青专区',
          to: '/commercialTenant',
          subText: 'Merchant List',
          icon: 'https://img1.baidu.com/it/u=1855937990,2189730199&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
          // to: '/commercialTenant',
          status: true
        },
        {
          text: '台生专区',
          subText: 'Policy List',
          icon: 'https://img1.baidu.com/it/u=1855937990,2189730199&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
          status: false
        },
        {
          text: '孵化创业园区',
          subText: 'Information Message',
          icon: 'https://img1.baidu.com/it/u=1855937990,2189730199&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
          status: false
        },
        {
          text: '政策/资讯天地',
          subText: 'Post a job',
          icon: 'https://img1.baidu.com/it/u=1855937990,2189730199&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
          status: false
        },
        {
          text: '活动园地',
          subText: 'Internship Registration',
          icon: 'https://img1.baidu.com/it/u=1855937990,2189730199&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
          status: false
        }
      ],
      // 功能模块列表
      modulesList: [
        {
          text: '园区简介',
          subText: 'Park Profile',
          icon: 'icon-a-bank2',
          url: 'https://mp.weixin.qq.com/s/6fBfMoc2GRdY1D7UEKnTKg',
          status: true
        },
        {
          text: '商户列表',
          subText: 'Merchant List',
          icon: 'icon-a-Storeshangdianxiaomaibu',
          to: '/commercialTenant',
          status: true
        },
        {
          text: '政策列表',
          subText: 'Policy List',
          icon: 'icon-a-gongwenbaogongwendai',
          status: false
        },
        {
          text: '资讯信息',
          subText: 'Information Message',
          icon: 'icon-a-baozhixinwen',
          status: false
        },
        {
          text: '岗位求职',
          subText: 'Post a job',
          icon: 'icon-gongju',
          status: false
        },
        {
          text: '实习报名',
          subText: 'Internship Registration',
          icon: 'icon-a-zhengshubiaozhangxukexieyirenke',
          status: false
        }
      ]
    }
  },

  computed: {},
  mounted() {
    this.init()
  },
  // 缓存激活
  activated() {},
  methods: {
    // 首页活动内容跳转
    goPath(path) {
      window.location.href = path
    },
    // 功能菜单跳转
    goLink(item) {
      const { status, url, toModules } = item
      if (!status) {
        Toast.fail('该功能还在建设中！')
        return
      }
      if (url) {
        window.location.href = url
      }
      if (toModules) {
        this.$router.push(toModules)
      }
    },
    // 初始化首页数据
    async init() {
      const res = await getModulesList()
      const { swiperList, functionList, advList, appyList } = res.data
      // 挂载头部轮播图
      this.swiperList = swiperList
      // 挂载菜单列表
      this.functionList = functionList
      // 挂载广告列表
      this.advList = advList
      // 预约列表
      this.appyList = appyList
    }
  }
}
</script>
<style lang="scss" scoped>
.index-container {
  .warpper {
    padding: 12px;
    background: #fff;
    .demo-home__title {
      margin: 0 0 6px;
      font-size: 32px;
      .demo-home__title img,
      .demo-home__title span {
        display: inline-block;
        vertical-align: middle;
      }
      img {
        width: 32px;
      }
      span {
        margin-left: 16px;
        font-weight: 500;
      }
    }
    .demo-home__desc {
      margin: 0 0 20px;
      color: rgba(69, 90, 100, 0.6);
      font-size: 14px;
    }
  }
}

.swiper-text {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 10px;
  font-size: 14px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  height: 200px;
  text-align: center;
  background-color: #39a9ed;
  img {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 200px;
    background-color: #fff;
    pointer-events: none;
  }
}
.my-swipe2 .van-swipe-item {
  height: 70px;
  img {
    height: 70px;
  }
}

.card {
  // margin: 16px 16px;
  // background: white;
  border-radius: 8px;
}

.module-list {
  margin: 10px 10px;
}
.module-box {
  height: 80px;
  margin-bottom: 10px;
  padding: 20px;
  box-sizing: border-box;
  background: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  cursor: pointer;
  // line-height: 60px;
  .myicon {
    font-size: 40px;
  }
  .tx {
    margin-left: 20px;
  }
  .title {
    font-size: 18px;
    font-weight: 600;
    color: #343635;
    margin: 0;
  }
  .text {
    font-size: 12px;
    font-weight: 400;
    color: #b5b7b9;
    margin: 0;
    padding-top: 5px;
  }
  .right {
    text-align: right;
    flex: auto;
  }
}

.yy-list {
  margin: 15px 10px;
  position: relative;
  z-index: 0;
  .yy-item {
    position: relative;
    height: 150px;
    display: flex;
    align-items: center;
    position: relative;
    margin-top: -30px;
    &:first-child {
      margin-top: 0;
    }
    &-l {
      flex: 2;
    }
    &-r {
      flex: 3;
      position: relative;
      text-align: center;
    }
    &-title {
      font-weight: 600;
      font-size: 14px;
      text-indent: 10px;
    }
    &-subTitle {
      font-size: 14px;
      text-indent: 40px;
    }
    &-image {
      width: 200px;
      height: 140px;
      border: 4px solid white;
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 30%);
    }
    &:nth-child(2n + 1) {
      .yy-item-image {
        // float: right;
      }
    }
    &-button {
      position: absolute;
      bottom: 30px;
      width: 100%;
      text-align: center;
      span {
        color: white;
        background: #1c97e2;
        padding: 6px 10px;
        // font-size: 12px;
        line-height: 12px;
        border-radius: 4px;
      }
    }
  }
}
// 菜单宫格hack
.van-grid-item__content {
  background-color: transparent;
}
.van-grid::v-deep {
  .van-icon__image {
    width: 40px;
    height: 40px;
    object-fit: fill;
  }
  .van-grid-item__content {
    background-color: transparent;
  }
}
</style>
